<template>
  <div style="width: 100%; height: 100%">
    <div class="list-cont" v-if="noData && !loading">
      <div class="list" v-for="item in listData" :key="item.documentId">
        <span>{{ item.documentName }}</span>
        <span>
          <el-button class="preview-btn" @click="handlePreview(item)"
            >预览</el-button
          >
        </span>
      </div>
    </div>
    <div v-if="noData && loading" class="loading">
      <div><i class="el-icon-loading"></i></div>
    </div>
    <div class="no-data" v-if="!noData">暂无数据</div>
    <el-dialog
      :visible.sync="detailsShow"
      title="详情"
      width="1200px"
      v-if="detailsShow"
      append-to-body
    >
      <div class="preview-content">
        <component
          :preview-data="formData"
          :is="currentComponent"
          ref="sublevel"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsShow = false" class="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProposalAllFilesByCondition } from "@/api/planManage/marketing.js";
import { preview } from "@/api/file/index.js";
import { Base64 } from "js-base64";
import Video_360 from "./Video_360.vue";
import Image_360 from "./Image_360.vue";
import Video from "./Video.vue";
import quotation from "./quotation.vue";
import { planListDetails } from "@/api/planManage/index.js";
export default {
  components: {
    Video_360,
    Image_360,
    Video,
    quotation
  },
  props: {
    previewData: {
      typeof: Object,
      default: null,
    },
  },
  data() {
    return {
      listData: [],
      noData: true,
      detailsShow: false,
      formData: null,
      templateType: "",
      loading: true,
      currentComponent: null,
    };
  },
  methods: {
    init() {
      getProposalAllFilesByCondition({ proposalId: this.previewData.pageId })
        .then((res) => {
          this.noData = true;
          this.loading = false;
          if (res.code === 200) {
            if (res.data.rows.length === 0) {
              this.noData = false;
            }
            this.listData = res.data.rows;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.noData = false;
          console.log(err);
        });
    },
    handlePreview(data) {
      this.formData = data;
      if (data.documentFormats == 6) {
        this.detailsShow = true;
        this.currentComponent = "Image_360";
      } else if (data.documentFormats == 7) {
        this.detailsShow = true;
        this.currentComponent = "Video_360";
      } else if (data.documentFormats == 5) {
        this.detailsShow = true;
        this.currentComponent = "Video";
      } else if (data.documentFormats == 9) {
        this.detailsShow = true;
        this.currentComponent = "quotation";
        this.handleQuotationDetails();
      } else if (data.documentFormats == 8) {
        this.$confirm(
          `
            建议配置：
            系统 win10 64位
            Cpu i7 7系列及以上
            内存 8G
            硬盘 SSD 500 G
            显卡 2060 6G显存及以上，提示
          `
        )
          .then(() => {
            window.location.href = row.documentLink;
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消跳转VR",
            });
          });
      } else {
        let params = {
          fileId: data.fileId,
          fileName: data.documentName,
        };
        //   let windowPreview = window.open("", "_blank");
        this.getFileUrl(params).then((res) => {
          if (res.code !== 200) {
            window.close();
            alert(res.msg);
            return;
          }
          window.open(res.preview, "_blank");
          // windowPreview.location.href = res.preview;
        });
      }
    },
    getFileUrl(file) {
      return new Promise((resolve) => {
        preview({ fileId: file.fileId }).then((res) => {
          if (res.code !== 200) {
            return resolve(res);
          }
          let storeId = res.data.storeId;
          let originUrl =
            storeId == null
              ? res.data.url
              : `${process.env.VUE_APP_API_HOST}${process.env.VUE_APP_BASE_API}/file/mongod-download/${storeId}`;
          originUrl += `?fullfilename=${file.fileName}`;
          let fininalUrl =
            process.env.VUE_APP_API_HOST +
            process.env.VUE_APP_BASE_API +
            "/kk-preview/onlinePreview?url=" +
            Base64.encode(originUrl);
          resolve({
            code: 200,
            downloadUrl: originUrl,
            preview: fininalUrl,
          });
        });
      }).catch((err) => {
        resolve({
          code: 500,
          msg: "服务器错误",
        });
      });
    },
    // 处理报价方案详情
    handleQuotationDetails() {
      planListDetails(this.formData.documentId).then((res) => {
        this.$refs.sublevel.listData = [];
        this.$refs.sublevel.total = 0;
        this.$refs.sublevel.count = res.data.motorCarNum
        
        const data = res.data.quote;
        data.forEach(item => {
          if (item.groupMethod === "1" && item.configurationType === "1") {
            item.sumDomesticGoodsPrice = item.nums * item.domesticGoodsPrice;
            item.sumFreeImportGoodsPrice = item.nums * item.freeImportGoodsPrice;
            item.sumNoFreeImportGoodsPrice = item.nums * item.noFreeImportGoodsPrice;
            item.total = item.sumDomesticGoodsPrice + item.sumFreeImportGoodsPrice + item.sumNoFreeImportGoodsPrice;
            this.$refs.sublevel.motorBase.push(item);
          } else if (item.groupMethod === "1" && item.configurationType === "2") {
            item.sumDomesticGoodsPrice = item.nums * item.domesticGoodsPrice;
            item.sumFreeImportGoodsPrice = item.nums * item.freeImportGoodsPrice;
            item.sumNoFreeImportGoodsPrice = item.nums * item.noFreeImportGoodsPrice;
            item.total = item.sumDomesticGoodsPrice + item.sumFreeImportGoodsPrice + item.sumNoFreeImportGoodsPrice;
            this.$refs.sublevel.motorChoose.push(item);
          } else if (item.groupMethod === "2" && item.configurationType === "1") {
            item.sumDomesticGoodsPrice = item.nums * item.domesticGoodsPrice;
            item.sumFreeImportGoodsPrice = item.nums * item.freeImportGoodsPrice;
            item.sumNoFreeImportGoodsPrice = item.nums * item.noFreeImportGoodsPrice;
            item.total = item.sumDomesticGoodsPrice + item.sumFreeImportGoodsPrice + item.sumNoFreeImportGoodsPrice;
            this.$refs.sublevel.trailerBase.push(item);
          } else if (item.groupMethod === "2" && item.configurationType === "2") {
            item.sumDomesticGoodsPrice = item.nums * item.domesticGoodsPrice;
            item.sumFreeImportGoodsPrice = item.nums * item.freeImportGoodsPrice;
            item.sumNoFreeImportGoodsPrice = item.nums * item.noFreeImportGoodsPrice;
            item.total = item.sumDomesticGoodsPrice + item.sumFreeImportGoodsPrice + item.sumNoFreeImportGoodsPrice;
            this.$refs.sublevel.trailerChoose.push(item);
          }
          this.$refs.sublevel.total += item.total;
        })
        this.$refs.sublevel.getCArList('motorCarNum');
        this.$refs.sublevel.getCArList('trailerNum');
      })
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.list {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #dfe6ec;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}
.preview-btn {
  width: 56px;
  height: 32px;
  padding: 7px 0;
  &:hover {
    color: #333;
    border-color: #dcdcdc;
    background-color: #fff;
  }
  &:active {
    color: #333;
    border-color: #dcdcdc;
  }
  &:focus {
    background-color: #fff;
  }
}
.no-data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  padding-top: 55px;
  box-sizing: border-box;
  i {
    font-size: 36px;
  }
}
</style>